<template>
  <div class="m-5 p-5 bg-white">
    <div style="max-width: 930px; margin: 0 auto">
      <h3>公告详情</h3>
      <el-descriptions border>
        <el-descriptions-item v-for="(item, index) in arr" :key="index" :label="item.label">{{
          item.value
        }}</el-descriptions-item>
        <el-descriptions-item label="是否到期"><span class="text-red-500">已到期</span></el-descriptions-item>
      </el-descriptions>
      <div class="my-5">
        公告内容：
        中国乒乓球协会14日在官网上对中国国家乒乓球队2024年巴黎奥运会女单和男、女子团体项目参赛运动员名单进行了公示。女单参赛运动员为孙颖莎、陈梦。女子团体参赛运动员为孙颖莎、陈梦、王曼昱、王艺迪（P卡：替补队员）。男子团体参赛运动员为王楚钦、樊振东、马龙、梁靖崑（P卡）。

　　     中国乒协此前已对巴黎奥运会混双、男单参赛运动员名单进行过公示。混双参赛运动员为王楚钦/孙颖莎，男单参赛运动员为王楚钦、樊振东。
        <br> <br>
        中国乒乓球协会14日在官网上对中国国家乒乓球队2024年巴黎奥运会女单和男、女子团体项目参赛运动员名单进行了公示。女单参赛运动员为孙颖莎、陈梦。女子团体参赛运动员为孙颖莎、陈梦、王曼昱、王艺迪（P卡：替补队员）。男子团体参赛运动员为王楚钦、樊振东、马龙、梁靖崑（P卡）。

　　     中国乒协此前已对巴黎奥运会混双、男单参赛运动员名单进行过公示。混双参赛运动员为王楚钦/孙颖莎，男单参赛运动员为王楚钦、樊振东。
      </div>
      <div class="mb-5">
        公告图片：
        <img src="/view.png" class="w-80" alt="">
        <img src="/xiang.png" class="w-80" alt="">
      </div>

      <br />
      <!-- <div class="flex m-auto">
      <div class="w-52" style="margin: 0 auto;">
        <h4>已读人员</h4>
        <el-tree :data="data" default-expand-all  />
      </div>
      <div class="bg-slate-100 w-3 mx-5"></div>
      <div class="w-52 m-auto">
        <h4>未读人员</h4>
        <el-tree :data="data" default-expand-all show-checkbox />
        <br>
        扣分
        <el-input-number style="width: 120px;" :model-value="1" />
        <div class="text-right mt-5">
          <el-button type="primary">确认</el-button>
        </div>
      </div>
    </div> -->
    <el-divider />
      <div class="flex justify-center">
        <el-transfer
          v-model="value"
          filterable
          :titles="['已读人员', '未读人员']"
          :filter-method="filterMethod"
          filter-placeholder="搜索"
          :data="data2"
        />
      </div>
      <div class="text-right pt-5">
        <span class="pl-10 pr-2">加分</span>
        <el-input-number style="width: 120px" :model-value="0" />
        <span class="pl-10 pr-2">加分原因</span>
        <el-input style="width: 180px" placeholder="请输入" />
        <span class="pl-10 pr-2">减分</span>
        <el-input-number style="width: 120px" :model-value="1" />
        <div class="mt-3">
          <el-popconfirm title="确认给xxx减分吗?" width="200">
            <template #reference>
              <el-button type="primary">确认</el-button>
            </template>
          </el-popconfirm>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue"

const arr = [
  {
    label: "公告名称",
    value: "天气炎热"
  },
  // {
  //   label: "公告内容",
  //   value: "有准备冷饮、风机 "
  // },
  {
    label: "发布人",
    value: "张三"
  },
  {
    label: "发布时间",
    value: "2024-05-14 08:18:35"
  },
  {
    label: "有效期",
    value: "2024-05-15 08:18:35"
  }
]
const data = [
  {
    label: "一车间",
    children: [
      {
        label: "二班组",
        children: [
          {
            label: "张三"
          }
        ]
      }
    ]
  },
  {
    label: "二车间",
    children: [
      {
        label: "一班组",
        children: [
          {
            label: "李四"
          }
        ]
      }
    ]
  }
]
const generateData = () => {
  const data = []
  const states = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九"]
  const initials = ["张三", "李四", "MD", "TX", "FL", "CO", "CT"]
  states.forEach((city, index) => {
    data.push({
      label: city,
      key: index,
      initial: initials[index]
    })
  })
  return data
}

const data2 = ref(generateData())
const value = ref([])

const filterMethod = (query, item) => {
  return item.initial.toLowerCase().includes(query.toLowerCase())
}
</script>
<style lang="scss" scoped></style>
